<template>
  <div class="flex_column">
    <search-section v-enter-search="() => { operate('search') }">
      <!-- 搜索查询 -->
      <div v-if="type!=='oneself'">
        <span>考核人员：</span>
        <el-select v-model="searchForm.carryOutId" clearable filterable class="my-search_input" style="width:160px" size="mini" placeholder="请选择考核人员" >
          <el-option v-for="(item,idx) in userList" :key="idx" :label="item.nickName" :value="item.userId" />
        </el-select>
      </div>
      <div>
        <span>考核名称：</span>
        <el-input v-model="searchForm.assessOptionName" clearable  class="my-search_input" style="width:160px" size="mini" placeholder="请输入模板名称" />
      </div>
			<!-- <div>
			  <span>考核状态：</span>
			  <el-select v-model="searchForm.assessStatus" clearable filterable class="my-search_datetime" style="width:160px" size="mini" placeholder="请选择考核状态" >
			    <el-option v-for="(item,idx) in assessStatusList" :key="idx" :label="item.label" :value="item.value" />
			  </el-select>
			</div> -->
      <div>
        <span>考核月份：</span>
        <el-date-picker
      				class="my-search_datetime" 
              v-model="searchForm.assessMonth"
							value-format="yyyy-MM"
              type="month"
              placeholder="选择考核月份">
        </el-date-picker>
      </div>
      <div slot="button">
        <el-button size="mini" @click="operate('reset')">重置</el-button>
        <el-button size="mini" type="primary" @click="operate('search')">搜索</el-button>
      </div>
    </search-section>
    <!-- 列表信息 -->
    <div class="section main flex_1_auto flex_column shadow_border_normal">
      <el-table
        ref="table"
        size="mini"
        :data="tableList"
        height="100%"
        stripe
        :row-style="{ height: '20px' }"
        :cell-style="{ padding: '0' }"
        border
        header-align="center"
        :header-cell-style="{
          whiteSpace: 'nowrap',
          fontSize: '12px',
          color: '#333',
          fontWeight: '700',
          background: '#f5f5f5',
        }"
        @header-dragend="$tableHeaderDragend(self, 'table')"
      >
        <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip fixed :index="getIndex" />
				<el-table-column  v-if="type=='all'" prop="creatorName" label="发起人" align="center"  show-overflow-tooltip  />
				<el-table-column  v-if="type!=='oneself'" prop="carryOutName" label="考核人" align="center"  show-overflow-tooltip  />
        <el-table-column prop="assessOptionName" label="考核名称"  align="center" show-overflow-tooltip >
					<template slot-scope="{row}">
							<el-link :underline="false" type="primary" @click="$goPage({ path: '/performanceSystem/myAssessment/assessmentDetails', query: { code:row.code}})">{{row.assessOptionName}}</el-link>
					</template>
				</el-table-column>
        <el-table-column prop="assessMonth" label="考核月份" align="center" show-overflow-tooltip  />
        <el-table-column prop="assessStatusName" label="考核状态" align="center" show-overflow-tooltip  />
        <el-table-column prop="oneselfMarkTotal" label="自评得分" align="center" show-overflow-tooltip >
					<template slot-scope="{row}">
						<!-- <span v-if="['E','F','H','G'].indexOf()>-1">{{row.oneselfMarkTotal}}</span> -->
						<span v-if="row.assessStatus>'D'">{{row.oneselfMarkTotal}}</span>
						<span v-else>--</span>
					</template>
				</el-table-column>
        <el-table-column prop="leaderMarkTotal" label="上级评分" align="center" show-overflow-tooltip  >
					<template slot-scope="{row}">
						<span v-if="row.assessStatus>'E'">{{row.leaderMarkTotal}}</span>
						<span v-else>--</span>
					</template>
				</el-table-column>
				
				<el-table-column prop="assessMarkTotal" label="考核得分" align="center"  show-overflow-tooltip >
					<template slot-scope="{row}">
						<span v-if="row.assessStatus>'D'">{{row.assessMarkTotal}}</span>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column prop="result" label="考核结果"  align="center" show-overflow-tooltip >
					<template slot-scope="{row}">
						<span v-if="row.assessStatus<'H'">--</span>
						<span v-else-if="Number(row.assessMarkTotal)>100">卓越</span>
						<span v-else-if="Number(row.assessMarkTotal)>90">优秀</span>
						<span v-else-if="Number(row.assessMarkTotal)>75">良</span>
						<span v-else-if="Number(row.assessMarkTotal)>60">合格</span>
						<span v-else>不合格</span>
					</template>
				</el-table-column>
				<el-table-column prop="exceedFlag" label="是否超期"  align="center" show-overflow-tooltip >
					<template slot-scope="{row}">
						<span class="markRed" v-if="row.exceedFlag==true">是</span>
						<span v-else>否</span>
					</template>
				</el-table-column>
				<el-table-column prop="exceedDay" label="超期天数" align="center" show-overflow-tooltip  >
					<template slot-scope="{row}">
						<span class="markRed" v-if="row.exceedDay">{{row.exceedDay}}</span>
						<span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip  />
				<el-table-column prop="url" label="审批流地址" align="center"  width="140" >
					<template slot-scope="{row}">
						<div class="flex_row">
							<el-tooltip class="item" effect="dark" :content="row.url" placement="top">
							  <span class="url">{{row.url}}</span>
							</el-tooltip>
							<el-button style="padding: 0 10px;" size="mini" type="text" v-if="row.url"
							  @click="$uCopy(row.url,$event)">
							  复制</el-button>
						</div>
					</template>
				</el-table-column>
				<el-table-column  label="操作"  align="center" width="120" show-overflow-tooltip v-if="type=='initiator'">
					<template slot-scope="{row}">
						<el-button type="text" v-if="row.assessStatus=='A'" @click.stop="operate('start',row)" >开始执行</el-button>
					</template>
				</el-table-column>
      </el-table>
    </div>
    <!-- 分页查询 -->
    <div class="paging">
      <el-pagination :current-page="searchForm.page" :page-sizes="$paginationSize" :page-size="searchForm.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
		
  </div>
</template>
<script>
import { time } from 'echarts'
import { Switch } from 'vant'
export default {
	components: {
	},
	props:{
		type: {
		  type: String,
		  default: 'oneself'
		},
		searchTime: {
		  type: String,
		  default: ''
		},
	},
  data() {
    return {
		userList: [], // 指标分组下拉框
		assessStatusList: [], // 考核状态下拉框
		tableList: [], // 指标库列表
      searchForm: {
        current: 1,
        size: this.$defaultPage,
        assessMonth: '', //	考核月份
        assessOptionName: '', // 考核方案名称
        carryOutId: '', // 考核人
      },
      total: 0,
      title: '',
    }
  },
  created() {
    this.searchForm.assessMonth=this.searchTime
		this.assessStatusList=[]
		Object.keys(this.$store.getters.assessmentStatus).forEach(key => {
			this.assessStatusList.push({
				label: this.$store.getters.assessmentStatus[key],
				value: key
			})
		})
    // 获取数据
    this.init()
    this.getUserList()
  },
  methods: {

    // 获取列表数据
    async init() {
			switch (this.type) {
			  case 'all':
					// 全部考核
			    this.getData('assessAll','reqTwoPage')
			    break
			  case 'initiator':
					// 我发起的
					this.getData('assessInitiated','reqInitiatedPage')
			    break
			  case 'curr':
					// 当前考核
					this.getData('assessInitiated','reqCurrAssessPage')
			    break
			  case 'historical':
					// 历史考核
					this.getData('assessInitiated','reqOldAssessPage')
			    break
			}
    },
		// 获取用户列表
		getUserList(name) {
			this.$API.common.reqUserList().then((res) => {
				if (res.code == '0') {
					this.userList = res.responseBody || []
				}
			})
		},
    // 获取列表数据
    async getData(url,api) {
      let res = await this.$API[url][api](this.searchForm)
      let{ code, responseBody } = res
      if (code == 0) {
        this.tableList = responseBody.records || []
        this.total = Number(responseBody.total)
      }
    },
		// 执行方案
		async start(item) {
			console.log(item)
			let res = await this.$API.assessOption.reqInitiateApprovalSingle(item.code)
			if (res && res.code == 0) {
				this.$message.success('操作成功！')
				this.init()
			} else {
				this.$message.error(res.message)
			}
		},
   
    // 内部方法
    async operate(type, item) {
      switch (type) {
        case 'reset':
        // 重置
          this.searchForm = this.$options.data.call(this).searchForm
          this.init()
          break
        case 'search':
          this.searchForm.current = 1
          this.init()
          break
        case 'start':
				console.log(item)
          this.$confirm('是否确定开始执行方案？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: '',
            customClass: 'my_confirm'
          }).then(() => {
            this.start(item)
          })
          break
      }
    },



    // 清空数据信息
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.searchForm = this.$options.data.call(this).searchForm
    },
    // 分页查询
    handleSizeChange(val) {
      this.searchForm.current = 1
      this.searchForm.size = val
      this.searchOne(this.searchForm)
    },
    handleCurrentChange(val) {
      this.searchForm.current = val
      this.searchOne(this.searchForm)
    },
    getIndex(index) {
      return (
        (this.searchForm.current - 1) * this.searchForm.size + index + 1
      )
    }
  }
}
</script>

<style lang="scss" scoped>
  .main {
    margin-bottom: 10px;
    ::v-deep th {
      height: 20px;
      padding: 1px;
    }
  }

  .dialog-box{
    padding:10px;
	margin-top: 20px;
  }
  .ann_input{
  	width: 300px;
  }
	.url{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.markRed{
		color: red;
		font-weight: bold;
	}
</style>
